
<template>
  <div class="bac">
    <div >
      <el-card class="login-container">
        <template slot="header">
          <h3>吃了么？</h3>
        </template>
        <el-form>
          <el-form-group>
            <el-form-item label="用户名" label-width="80px">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="80px">
              <el-input v-model="form.password"></el-input>
            </el-form-item>

          </el-form-group>
          <el-form-group>
            <el-button class="login-button" @click="loginHandle">
              登录
            </el-button>
          </el-form-group>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },errMsg:{
          message:'用户名密码错误',
          isShow:false
        }
      }
    }, methods: {
      loginHandle() {
        var _this = this;
        this.axios({
          url: 'http://localhost:3000/user/login',
          method: 'get',
          params: {
            username: this.form.username,
            password: this.form.password,
          },
        }).then(function (res) {
          if (res.data.flag){
            _this.$router.push('/layout')
          }else {
            _this.errMsg.isShow=true;
            _this.$message({
              message:'用户名或者密码错误'
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .login-container{
    position: relative;
    width:450px;
    height:380px;
    margin-left:35%;
    margin-top:230px;
    background: rgba(255,255,255,0.6);

  }
  .login-button{
    width:150px;
    height:45px;
    margin-left:130px;
    background: pink;
  }
  .bac {
    background-image: url("../../assets/登录界面背景图片.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 800px;
    overflow: hidden;
  }
</style>
